<template>
  <div class="data">
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>销量情况</el-breadcrumb-item>
      <el-breadcrumb-item>柴油</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <!-- <h3>柴油数据显示</h3> -->
      <el-table :data='dataShow'
                border
                stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="date"
                         label='日期'>
          <template slot-scope="scope">
            {{scope.row.date | dateFormat}}
          </template>
        </el-table-column>
        <el-table-column :prop="index"
                         :label='item'
                         v-for='(item,index) in nameData'
                         :key='index'>
        </el-table-column>

        <el-table-column fixed="right"
                         label="操作"
                         width="50">
          <template slot-scope="scope">
            <el-button type="text"
                       size="small"
                       @click="edit(scope.row.stringDate)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!---分页--->
      <el-pagination background
                     layout="total, sizes,prev, pager, next"
                     :total="total"
                     :page-size="pageSize"
                     :page-sizes="[30, 40, 50, 20]"
                     :pager-count="11"
                     :current-page='currentPage'
                     @size-change="handleSizeChange"
                     @current-change="handleCurrentChange">
      </el-pagination>
      <el-row class="excel">

        <el-button type="primary"
                   @click="exportExcel">数据导出</el-button>
      </el-row>
    </el-card>
    <!----编辑修改数据对话框----->
    <el-dialog title="编辑数据"
               :visible.sync="editShow"
               width="30%">

      <el-form ref="editDataFormRef"
               :model="editForm"
               :rules='editOilRules'>
        <el-form-item :prop="index"
                      :label='item'
                      v-for='(item,index) in nameData'
                      :key='index'>
          <el-input v-model="editForm[index]"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="editShow = false">取 消</el-button>
        <el-button type="primary"
                   @click='editUpdate'>确 定</el-button>
      </span>
    </el-dialog>
    <!----------------------------------------------------------------------------------->
    <el-card style="margin-top:30px;">
      <h3>柴油销售情况显示</h3>

      <el-table :data='dataShow2'
                border
                stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="date"
                         label='日期'>
          <template slot-scope="scope">
            {{scope.row.date | dateFormat}}
          </template>
        </el-table-column>
        <el-table-column :prop="index"
                         :label='item'
                         v-for='(item,index) in nameData2'
                         :key='index'>
        </el-table-column>
        <el-table-column prop="total"
                         label='总收入'>
        </el-table-column>
      </el-table>
      <!---分页--->
      <el-pagination background
                     layout="total, sizes,prev, pager, next"
                     :total="total2"
                     :page-size="pageSize2"
                     :page-sizes="[30, 40, 50, 20]"
                     :pager-count="11"
                     :current-page='currentPage2'
                     @size-change="handleSizeChange2"
                     @current-change="handleCurrentChange2">
      </el-pagination>
      <el-row class="excel">

        <el-button type="primary"
                   @click="exportExcel2">数据导出</el-button>
      </el-row>
    </el-card>
  </div>
</template>
<script>
import { isNumber } from '../plugins/validate'
export default {
  name: 'Data',
  props: {
    msg: String
  },
  data () {
    return {
      datas: [],
      nameData: {},
      compareForm: {
      },
      editForm: {
      },
      editOilRules: {
        data0: [
          { required: true, message: '不能为空哟！' },
          { validator: isNumber, message: '只能输入数字，整数或小数' }
        ],
        data1: [
          { required: true, message: '不能为空哟！' },
          { validator: isNumber, message: '只能输入数字，整数或小数' }
        ],
        data2: [
          { required: true, message: '不能为空哟！' },
          { validator: isNumber, message: '只能输入数字，整数或小数' }
        ],
        data3: [
          { required: true, message: '不能为空哟！' },
          { validator: isNumber, message: '只能输入数字，整数或小数' }
        ],
        data4: [
          { required: true, message: '不能为空哟！' },
          { validator: isNumber, message: '只能输入数字，整数或小数' }
        ],
        data5: [
          { required: true, message: '不能为空哟！' },
          { validator: isNumber, message: '只能输入数字，整数或小数' }
        ],
        data6: [
          { required: true, message: '不能为空哟！' },
          { validator: isNumber, message: '只能输入数字，整数或小数' }
        ],
        data7: [
          { required: true, message: '不能为空哟！' },
          { validator: isNumber, message: '只能输入数字，整数或小数' }
        ]
      },
      editShow: false,
      //数据总条数
      total: 0,
      //当前页
      currentPage: 1,
      //一共多少页
      pageNum: 1,
      //当前页中的数据
      dataShow: [],
      //根据页数对数据分组，并存进每一页
      totalPage: [],
      //每页多少条
      pageSize: 30,
      //将数据转为数组
      dataArray: [],
      //柴油销售情况的数据
      datas2: [],
      nameData2: {},
      dataShouyi2: [],
      editShow2: false,
      //数据总条数
      total2: 0,
      //当前页
      currentPage2: 1,
      //一共多少页
      pageNum2: 1,
      //当前页中的数据
      dataShow2: [],
      //根据页数对数据分组，并存进每一页
      totalPage2: [],
      //每页多少条
      pageSize2: 30,
      //将数据转为数组
      dataArray2: [],
      nameExcel: [],
      titelExcel: [],
      nameExcel2: [],
      titelExcel2: []
    }
  },
  created: function () {
    this.findData()
  },
  computed: {
  },
  methods: {
    async findData () {
      var url = '/api/findChaiyouData'
      this.datas = []
      const { data: res } = await this.$http.get(url)
      this.nameData = res[res.length - 1]
      for (let i = 0; i < (res.length - 1); i++) {
        this.datas.push(res[i])
      }
      this.editForm["stringDate"] = ''
      this.editForm.date = new Date()
      this.nameExcel[0] = '日期'
      this.titelExcel[0] = 'stringDate'
      this.nameExcel2[0] = '日期'
      this.titelExcel2[0] = 'stringDate'
      for (let item in this.nameData) {
        this.$set(this.editForm, item, 0)
        this.nameExcel.push(this.nameData[item])
        this.titelExcel.push(item)
        this.nameExcel2.push(this.nameData[item])
        this.titelExcel2.push(item)
      }
      this.total = res.length - 1
      this.nameExcel2.push('总收入')
      this.titelExcel2.push('total')
      this.pageData()
      this.findDataShouyi()
    },
    //编辑某天数据前先得到这条数据
    edit (date) {
      this.editShow = true
      for (let i = 0; i < this.datas.length; i++) {
        // this.nameData
        if (this.datas[i].stringDate === date) {
          for (let item in this.nameData) {
            // console.log(item)
            // this.editForm[item] = this.dds[i][item]
            this.$set(this.editForm, item, this.datas[i][item])
          }
          this.editForm.date = this.datas[i].date
          // console.log(this.datas[i].date)
        }
      }
      this.editForm.stringDate = date
    },
    //提交编辑某天的数据
    editUpdate () {
      this.$refs.editDataFormRef.validate(valid => {
        //判断提交的编辑数据与原数据是否相同，如相同则不提交
        // let flags = this.$common.compare(this.compareForm, this.editForm)
        // if (flags) return
        if (!valid) return
        this.editShow = false
        let dates = this.editForm.stringDate;
        let url = '/api/editChaiyouData'
        console.log(this.editForm.date)
        for (let item in this.nameData) {
          let items = {
            stringDate: dates,
            name: this.nameData[item],
            datas: this.editForm[item],
            date: this.editForm.date
          }
          this.$http.post(url, this.$qs.stringify(items)).then(res => {
            if (res.status === 200) {

            } else {
              // this.$common.fail('恭喜，编辑成功！')
            }
          })
        }
        this.$common.succ('恭喜，编辑成功！')
        this.findData()
      })
    },
    //计算分页，及存入数据
    pageData () {
      //计算页数
      this.pageNum = Math.ceil(this.datas.length / this.pageSize) || 1
      //根据页数对数据分组，并存进每一页
      for (let i = 0; i < this.pageNum; i++) {
        // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
        // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
        let das = []
        // if (i == (this.pageNum - 1)) {
        // console.log(this.dataShouyi.length)
        for (let j = 0; j < this.pageSize; j++) {
          if ((this.pageSize * i + j) < (this.datas.length)) {
            das[j] = this.datas[this.pageSize * i + j]
          }
        }
        this.totalPage[i] = das
      }
      this.dataShow = this.totalPage[this.currentPage - 1]
    },
    handleSizeChange (newSize) {

      this.pageSize = newSize
      // this.dataShow = this.totalPage[this.currentPage - 1]
      this.pageData()
    },
    handleCurrentChange (newPage) {
      this.currentPage = newPage
      this.dataShow = this.totalPage[this.currentPage - 1]
    },
    //关闭新增数据对话框同时把数据清空
    addressDialogClosed () {
      this.$refs.dataFormRef.resetFields()
    },
    exportExcel () {
      const tHeader = this.nameExcel;
      const filterVal = this.titelExcel;
      const title = '油表数据表示'
      const list = this.datas
      this.$common.export2Excel(tHeader, filterVal, list, title)
    },
    async findDataShouyi () {
      var url = '/api/findShouyiData'
      this.dataShouyi2 = []
      const { data: res } = await this.$http.get(url)
      this.nameData2 = res[res.length - 1]
      for (let i = 0; i < (res.length - 1); i++) {
        this.dataShouyi2.push(res[i])
      }
      this.total2 = res.length - 1
      this.pageData2()
    },
    //计算分页，及存入数据
    pageData2 () {
      //计算页数
      this.pageNum2 = Math.ceil(this.dataShouyi2.length / this.pageSize2) || 1
      for (let i = 0; i < this.pageNum2; i++) {
        let das = []
        for (let j = 0; j < this.pageSize2; j++) {
          if ((this.pageSize2 * i + j) < (this.dataShouyi2.length)) {
            das[j] = this.dataShouyi2[this.pageSize2 * i + j]
          }
        }
        this.totalPage2[i] = das
      }
      this.dataShow2 = this.totalPage2[this.currentPage2 - 1]
    },
    handleSizeChange2 (newSize) {
      this.pageSize2 = newSize
      // this.dataShow = this.totalPage[this.currentPage - 1]
      this.pageData2()
    },
    handleCurrentChange2 (newPage) {
      this.currentPage2 = newPage
      this.dataShow2 = this.totalPage2[this.currentPage2 - 1]
    },
    exportExcel2 () {
      const tHeader = this.nameExcel2;
      const filterVal = this.titelExcel2;
      const title = '油表每天销售情况'
      const list = this.dataShouyi2
      this.$common.export2Excel(tHeader, filterVal, list, title)
    },
  },
}
</script>
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  margin: 0 10px;
}
a {
  color: #42b983;
}
.shows {
  overflow: hidden;
}
.shows ul {
  float: left;
}
.el-pagination {
  padding-top: 30px;
}
h3 {
  text-align: left;
  line-height: 30px;
  font-size: 18px;
  margin: 0;
  margin-bottom: 15px;
}
</style>
